<template>
    <div class="operation">
        <div class="operation_area">
            <Dropdown trigger="click"
                      v-for="menuItem in operation"
                      :key="menuItem.key"
                      @on-click="handleSubClick"
            >
                <a
                        class="menu_item"
                        href="javascript:void(0)">
                    <Icon
                            class="menu_icon"
                            :type="menuItem.icon"></Icon>
                    {{menuItem.name}}
                </a>
                <DropdownMenu
                        v-for="child in menuItem.children"
                        :key="child.name"
                        slot="list">
                    <DropdownItem
                            v-if="child.type !== 'group'"
                            :name="child.event"
                    >{{child.name}}
                    </DropdownItem>
                    <div
                            v-if="child.type === 'group'"
                    >
                        <span class="sub_title">{{child.groupName}}</span>
                        <Fragment
                                v-for="sub_child in child.children"
                                :key="sub_child.name"
                        >
                            <DropdownItem
                                    :name="`${sub_child.event}_${JSON.stringify(sub_child.tools)}`"
                            >{{sub_child.name}}
                            </DropdownItem>
                        </Fragment>

                    </div>
                </DropdownMenu>
            </Dropdown>
        </div>
        <IndexTools v-if="showTools"></IndexTools>
        <Modal
                v-model="modal.showModal"
                :title="modal.title"
                :loading="modal.loading"
                @on-ok="handleModal">
            <Form :model="formItem" :label-width="80">
                <FormItem :label="modal.lable">
                    <Input v-model="formItem.name" :placeholder="modal.placeholder"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
  import IndexTools from './IndexTools';
  import {mapState} from 'vuex';
  import {Icon, Modal, Form, FormItem, Input} from 'view-design';
  import {Fragment} from 'vue-fragment';

  export default {
    name: "IndexOperation",
    components: {IndexTools, Icon, Fragment, Modal, Form, FormItem, Input},
    data() {
      return {
        modal: {
          type: '',
          showModal: false,
          title: '',
          placeholder: '',
          loading: false,
          lable: '',
        },
        formItem: {
          name: ''
        }
      }
    },
    methods: {
      reset() {
        this.modal = {
          type: '',
          showModal: false,
          title: '',
          placeholder: '',
          loading: false,
          lable: '',
        };
        this.formItem = {
          name: ''
        }
      },
      handleSubClick(eventStr) {

        // 打开工具箱
        if (eventStr.indexOf('openTools') !== -1) {
          // 放置操作
          // 切割数据
          let [event, content] = eventStr.split('_')
          this.$store.commit(event, JSON.parse(content))
        }

        // 创建新工程
        if (eventStr.indexOf('createProject') !== -1) {
          this.modal.title = '新建工程';
          this.modal.type = 'project';
          this.modal.lable = '名称';
          this.modal.placeholder = '填写工程名';
          this.modal.showModal = true;
        }

        // 创建新文件
        if (eventStr.indexOf('createFile') !== -1) {
          // 判断是否已经选中项目
          let {treeContent, selectedUUID} = this.$store.state;

          if (!selectedUUID || treeContent[selectedUUID].type !== 'folder') {
            // 选中项不是工程 执行报错 提示请选中工程
            this.$Message['info']({
              background: false,
              content: '请选择要创建的工程'
            });
            return;
          }
          this.modal.title = '新建文件';
          this.modal.type = 'file';
          this.modal.lable = '文件名';
          this.modal.placeholder = '填写文件名';
          this.modal.showModal = true;
        }

        // 保存文件
        if (eventStr.indexOf('saveFile') !== -1) {
          // 判断是否已经选中项目
          let {treeContent, selectedUUID} = this.$store.state;

          if (!selectedUUID || treeContent[selectedUUID].type !== 'file') {
            // 选中项不是工程 执行报错 提示请选中工程
            this.$Message['info']({
              background: false,
              content: '请选择要保存的文件'
            });
            return;
          }
          console.log('测试')
         this.$store.dispatch('saveFile');
        }

        // 保存.m文件
        if (eventStr.indexOf('saveMatlabFile') !== -1) {
          // 判断是否已经选中项目
          let {treeContent, selectedUUID} = this.$store.state;

          if (!selectedUUID || treeContent[selectedUUID].type !== 'file') {
            // 选中项不是工程 执行报错 提示请选中工程
            this.$Message['info']({
              background: false,
              content: '请选择要保存的文件'
            });
            return;
          }
          console.log('测试')
          this.$store.dispatch('saveMatlabFile');
        }

        // 切换组态区为图表区
        if (
          eventStr.indexOf('openPlot') !== -1 ||
          eventStr.indexOf('closePlot') !== -1 ||
          eventStr.indexOf('openThree') !== -1 ||
          eventStr.indexOf('closeThree') !== -1
        ) {
          this.$store.commit(eventStr)
        }


      },
      handleModal() {
        this.modal.loading = true;
          switch (this.modal.type) {
            case "project":
              this.$store.commit('createProject', this.formItem.name);
              this.reset();
              break;
            case "file":
              this.$store.commit('createFile', this.formItem.name);
              this.reset();
              break;
          }
      }
    },
    computed: {
      ...mapState([
        'showTools',
        'operation',
      ])
    }
  }
</script>

<style scoped lang="scss">
    .operation {
        background-color: #fff;

        .operation_area {
            min-height: 40px;
            display: flex;
            padding-left: 10px;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            border-top: 1px solid #cbcccc;
            -webkit-box-shadow: inset 0 1px 0 0 #fff;
            -moz-box-shadow: inset 0 1px 0 0 #fff;
            box-shadow: inset 0 1px 0 0 #fff;
            background-color: #f5f5f5;
            background-image: linear-gradient(to bottom, #f5f5f5, #eee);
            border-bottom: 1px solid #aaaaaa;

            .menu_icon {
                margin-right: 2px;
            }

            .menu_item {
                min-width: 60px;
                display: flex;
                justify-content: center;

            }

            .sub_title {
                display: inline-block;
                width: 100%;
                font-size: 80%;
                color: darkgray;
            }
        }
    }

</style>
